<template>
  <div class="wave-body">
 
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      msg:''
    }
  }
}
</script>
 
<style scoped lang="scss">
  .wave-body {
    position: relative;
    align-items: center;
    min-height: 80vh;
    background-color: rgb(118, 218, 255);
    overflow: hidden;
    &:before, &:after {
      content: "";
      position: absolute;
      left: 50%;
      min-width: 300vw;
      min-height: 300vw;
      background-color: #fff;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    &:before {
      animation-name: rotateb;
      bottom: 15vh;
      border-radius: 45%;
      animation-duration: 10s;
    }
    &:after {
      animation-name: rotatea;
      bottom: 12vh;
      opacity: .5;
      border-radius: 60%;
      animation-duration: 10s;
    }
  }

  @keyframes rotateb {
    0% {
      transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
      transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
      transform: translate(-50%, 0%) rotateZ(360deg);
    }
  }
  @keyframes rotatea {
    0% {
      transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
      transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
      transform: translate(-50%, 0%) rotateZ(360deg);
    }
  }
</style>